<template>
  <div>
    <t-drawer
      size="408px"
      :footer="false"
      :visible.sync="showSettingPanel"
      header="设置"
      :close-btn="true"
      :on-close-btn-click="handleCloseDrawer"
      class="setting-drawer-container"
    >
      <div class="setting-container">
        <t-form
          ref="form"
          :data="formData"
          size="large"
          label-align="left"
          @reset="onReset"
          @submit="onSubmit"
        >
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <svg-icon
                  :icon-class="$store.state.setting.mode === 'dark' ? 'page-setting' : 'page-setting2'"
                  class="panelIconClass"
                />页面设置
              </template>
              <div class="setting-group-title">
                主题模式
              </div>
              <t-radio-group v-model="formData.mode">
                <div
                  v-for="(item, index) in MODE_OPTIONS"
                  :key="index"
                  class="setting-layout-drawer"
                >
                  <div>
                    <t-radio-button
                      :key="index"
                      :value="item.type"
                    >
                      <component :is="getModeIcon(item.type)" />
                    </t-radio-button>
                    <p :style="{ textAlign: 'center', marginTop: '8px' }">
                      {{ item.text }}
                    </p>
                  </div>
                </div>
              </t-radio-group>
              <div v-show="!$store.getters['user/isGroupLogin']">
                <div class="setting-group-title">
                  导航布局
                </div>

                <t-radio-group v-model="formData.layout">
                  <div
                    v-for="(item, index) in LAYOUT_OPTION"
                    :key="index"
                    class="setting-layout-drawer"
                  >
                    <t-radio-button
                      :key="index"
                      :value="item"
                    >
                      <thumbnail :src="getThumbnailUrl(item)" />
                    </t-radio-button>
                  </div>
                </t-radio-group>
                <div class="setting-group-title">
                  元素开关
                </div>
                <t-form-item
                  v-show="formData.layout === 'side'"
                  label="显示 Header"
                  name="showHeader"
                >
                  <t-switch v-model="formData.showHeader" />
                </t-form-item>
                <t-form-item
                  label="显示 Footer"
                  name="showFooter"
                >
                  <t-switch v-model="formData.showFooter" />
                </t-form-item>
                <t-form-item
                  v-show="formData.layout == 'mix'"
                  label="显示左侧菜单栏"
                  name="isUseMenu"
                >
                  <t-switch
                    v-model="formData.isUseMenu"
                    @change="isUsemenu"
                  />
                </t-form-item>
                <t-form-item
                  label="使用 多标签Tab页"
                  name="isUseTabsRouter"
                >
                  <t-switch v-model="formData.isUseTabsRouter" />
                </t-form-item>
                <t-form-item
                  v-show="formData.showFooter && !formData.isSidebarFixed"
                  label="footer 内收"
                  name="footerPosition"
                >
                  <t-switch v-model="formData.isFooterAside" />
                </t-form-item>
              </div>
            </el-collapse-item>
          </el-collapse>
          <!-- <div class="settingBtn" @click="editPanel()">
            <svg-icon
              :icon-class="$store.state.setting.mode === 'dark' ? 'edit-panels' : 'edit-panels2'"
              class="panelIconClass"
            />
            <p>编辑面板</p>
          </div> -->
        </t-form>
      </div>
    </t-drawer>
  </div>
</template>
<script lang="ts">
import { mapGetters } from "vuex";
import { Color } from "tvision-color";
import { PopupVisibleChangeContext } from "tdesign-vue";

import STYLE_CONFIG from "@/config/style";
import { insertThemeStylesheet, generateColorMap } from "@/config/color";

import Thumbnail from "@/components/mainEntrance/thumbnail/index.vue";
import ColorContainer from "@/components/mainEntrance/color/index.vue";

import SettingDarkIcon from "@/assets/assets-setting-dark.svg";
import SettingLightIcon from "@/assets/assets-setting-light.svg";
import SettingAutoIcon from "@/assets/assets-setting-auto.svg";
import { setpageConfig } from "@/api/mainEntrance/system/user";
// const LAYOUT_OPTION = ['side', 'top', 'mix'];
const LAYOUT_OPTION = ["top", "mix"];
const COLOR_OPTIONS = ["default", "cyan", "green", "yellow", "orange", "red", "pink", "purple", "dynamic"];
const MODE_OPTIONS = [
  { type: "light", text: "明亮" },
  { type: "dark", text: "暗黑" }
  // { type: 'auto', text: '跟随系统' },
];

export default {
  name: "DefaultLayoutSetting",
  components: { Thumbnail, ColorContainer },
  data() {
    return {
      colors: {
        hex: null
      },
      MODE_OPTIONS,
      LAYOUT_OPTION,
      COLOR_OPTIONS,
      visible: false,
      formData: { ...STYLE_CONFIG },
      isColoPickerDisplay: false,
      activeNames: ["1"]
    };
  },
  computed: {
    ...mapGetters("setting", ["showSettingBtn"]),
    showSettingPanel: {
      get() {
        return this.$store.state.setting.showSettingPanel;
      },
      set(newVal) {
        this.$store.commit("setting/toggleSettingPanel", newVal);
      }
    },
    iconName() {
      return this.visible ? "close" : "setting";
    },
    showOthers() {
      return (this.formData.showFooter && !this.formData.isSidebarFixed) || !this.formData.splitMenu;
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        // 没有在formData中 需要从store中同步过来
        const { isSidebarCompact } = this.$store.state.setting;
        this.$store.dispatch("setting/changeTheme", { ...newVal, isSidebarCompact });
        this.setpageConfigs();
      },
      deep: true
    }
  },
  mounted() {
    document.querySelector(".dynamic-color-btn")?.addEventListener("click", () => {
      this.isColoPickerDisplay = true;
    });
  },
  methods: {
    onPopupVisibleChange(visible: boolean, context: PopupVisibleChangeContext) {
      if (!visible && context.trigger === "document") this.isColoPickerDisplay = visible;
    },
    onReset(): void {
      this.formData = {
        ...STYLE_CONFIG
      };
      this.$message.success("已恢复初始设置");
    },
    onSubmit({ result, firstError, e }): void {
      e.preventDefault();
      if (result === true) {
        this.visible = false;
      } else {
        this.$message.warning(firstError);
      }
    },
    getModeIcon(mode: string) {
      if (mode === "light") {
        return SettingLightIcon;
      }
      if (mode === "dark") {
        return SettingDarkIcon;
      }
      return SettingAutoIcon;
    },
    getThumbnailUrl(name: string) {
      return new URL(`../assets/mainEntrance/${name}.png`, import.meta.url).href;
    },
    handleClick(): void {
      this.$store.commit("setting/toggleSettingPanel", true);
    },
    handleCloseDrawer(): void {
      this.$store.commit("setting/toggleSettingPanel", false);
    },
    setpageConfigs(): void {
      const data = {
        brandTheme: this.formData.brandTheme,
        isHeaderFixed: this.formData.isHeaderFixed,
        isSidebarFixed: this.formData.isSidebarFixed,
        isUseMenu: this.formData.isUseMenu,
        isUseTabsRouter: this.formData.isUseTabsRouter,
        layout: this.formData.layout,
        mode: this.formData.mode,
        showBreadcrumb: this.formData.showBreadcrumb,
        showFooter: this.formData.showFooter,
        splitMenu: this.formData.splitMenu,
        userId: this.$store.getters["user/userDetail"].user.userId
      };
      setpageConfig(data).then(() => { });
    },
    changeColor(hex: string) {
      const { setting } = this.$store.state;

      // hex 主题色
      const newPalette = Color.getPaletteByGradation({
        colors: [hex],
        step: 10
      })[0];
      const { mode } = this.$store.state.setting;
      const colorMap = generateColorMap(hex, newPalette, mode);

      this.$store.commit("setting/addColor", { [hex]: colorMap });

      insertThemeStylesheet(hex, colorMap, mode);

      this.$store.dispatch("setting/changeTheme", { ...setting, brandTheme: hex });
    },
    isUsemenu() {
      this.$store.commit("setting/toggleSidebarCompact");
    },
    editPanel() {
      this.$bus.$emit("emitBus");
      this.$store.commit("setting/toggleSettingPanel", false);
    }
  }
};
</script>
<style lang="less">
@import "@/style/variables.less";

.tdesign-setting {
  z-index: 100;
  position: fixed;
  bottom: 200px;
  right: 0;
  height: 40px;
  width: 40px;
  border-radius: 20px 0 0 20px;
  transition: all 0.3s;

  .t-icon {
    margin-left: 8px;
  }

  .tdesign-setting-text {
    font-size: 12px;
    display: none;
  }

  &:hover {
    width: 96px;

    .tdesign-setting-text {
      display: inline-block;
    }
  }
}

.setting-layout-color-group {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50% !important;
  padding: 6px !important;
  border: 2px solid transparent !important;

  > .t-radio-button__label {
    display: inline-flex;
  }
}

.tdesign-setting-close {
  position: fixed;
  bottom: 200px;
  right: 300px;
}

.setting-group-title {
  font-size: 14px;
  line-height: 22px;
  margin: 32px 0 24px;
  text-align: left;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  color: var(--td-text-color-primary);
}

.setting-group-color {
  position: relative;

  > div {
    position: absolute;
    z-index: 2;
    right: 0;
  }
}

.setting-link {
  cursor: pointer;
  color: var(--td-brand-color);
  margin-bottom: 8px;
}

.setting-info {
  position: absolute;
  padding: 24px;
  bottom: 0;
  left: 0;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  color: var(--td-text-color-placeholder);
  width: 100%;
}

.setting-drawer-container {
  .setting-container {
    padding-bottom: 100px;
  }

  .t-radio-group.t-size-m {
    min-height: 32px;
    width: 100%;
    height: auto;
    justify-content: space-around;
    align-items: center;
  }

  .setting-layout-drawer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;

    .t-radio-button {
      display: inline-flex;
      max-height: 78px;
      padding: 8px;
      border-radius: @border-radius;
      //   border: 2px solid var(--td-component-border);
      border: 2px solid rgba(100, 90, 90, 0.5);
      height: auto;

      > .t-radio-button__label {
        display: inline-flex;
      }
    }

    .t-is-checked {
      border: 2px solid var(--td-brand-color) !important;
    }

    .t-form__controls-content {
      justify-content: flex-end;
    }
  }

  .t-form__controls-content {
    justify-content: flex-end;
  }
}

.setting-route-theme {
  .t-form__label {
    min-width: 310px !important;
    color: var(--td-text-color-secondary);
  }
}

.setting-color-theme {
  .setting-layout-drawer {
    .t-radio-button {
      height: 32px;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.settingBtn {
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.el-collapse-item__content {
  font-size: 14px;
}

.el-collapse {
  .t-form__item {
    margin-left: 30px;
  }
}
</style>